<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    canvas{border: solid 1px black;}
  </style>
</head>
<body>
  <canvas id="cvs" width="400" height="200"></canvas>
</body>
<script>

  const cvs = document.querySelector("#cvs");
  const c2d = cvs.getContext("2d")

  c2d.moveTo(50,50);
  c2d.lineTo(130,130);
  c2d.lineTo(210,50);
  
  // 闭合路径：可以将最后一笔的落点和起点位置强行连接
  c2d.closePath();

  c2d.lineWidth = 10;
  c2d.strokeStyle = "red";

  c2d.stroke();

  // ======

  // 重新开始一个新路径
  c2d.beginPath();

  c2d.moveTo(250,50);
  c2d.lineTo(170,130);
  c2d.lineTo(330,130);

  // c2d.closePath();

  // 设置描边颜色
  c2d.strokeStyle = "green";
  // 设置填充颜色
  c2d.fillStyle = "pink";

  // 绘制（描边）
  c2d.stroke();
  // 填充
  c2d.fill();


  
</script>
</html>